<template>
  <el-dialog
    v-model="visible"
    :title="t('trash.dialogs.restoreTitle')"
    width="500px"
    :before-close="handleClose"
  >
    <div class="restore-dialog">
      <!-- 文件列表 -->
      <div class="files-section">
        <h4>{{ t('trash.dialogs.restoreFilesCount', { count: files.length }) }}</h4>
        <div class="files-list">
          <div
            v-for="file in files"
            :key="file.id"
            class="file-item"
          >
            <el-icon class="file-icon">
              <component :is="getFileIcon(file)" />
            </el-icon>
            <div class="file-info">
              <div class="file-name">{{ file.originalName }}</div>
              <div class="file-meta">
                {{ file.isDirectory ? t('trash.fileList.folder') : formatFileSize(file.fileSize || 0) }}
                <span class="deleted-time">
                  {{ t('trash.fileList.deletedAt') }} {{ formatDeletedTime(file.deletedAt || '') }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 还原选项 -->
      <div class="restore-options">
        <h4>{{ t('trash.dialogs.restoreLocation') }}</h4>
        <el-radio-group v-model="restoreOption">
          <el-radio value="original">
            <div class="option-content">
              <div class="option-title">{{ t('trash.dialogs.restoreToOriginal') }}</div>
              <div class="option-desc">
                {{ t('trash.dialogs.restoreToOriginalDesc') }}
              </div>
            </div>
          </el-radio>
          <el-radio value="root">
            <div class="option-content">
              <div class="option-title">{{ t('trash.dialogs.restoreToRoot') }}</div>
              <div class="option-desc">
                {{ t('trash.dialogs.restoreToRootDesc') }}
              </div>
            </div>
          </el-radio>
        </el-radio-group>
      </div>

      <!-- 冲突处理说明 -->
      <div class="conflict-info">
        <el-alert
          :title="t('trash.dialogs.conflictInfo')"
          type="info"
          :closable="false"
          show-icon
        >
          {{ t('trash.dialogs.conflictDesc') }}
        </el-alert>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">{{ t('trash.dialogs.cancel') }}</el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
          :loading="loading"
        >
          {{ t('trash.dialogs.restoreConfirm') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { Folder, Document, Picture, VideoPlay, Mic } from '@element-plus/icons-vue'
import type { FileInfo } from '@/types/file'
import { formatFileSize, getFileTypeIcon } from '@/api/modules/trash'

// ==================== 国际化 ====================

const { t } = useI18n()

// ==================== Props & Emits ====================

interface Props {
  modelValue: boolean
  files: FileInfo[]
  loading?: boolean
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm', restoreToRoot: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
})

const emit = defineEmits<Emits>()

// ==================== 状态管理 ====================

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const restoreOption = ref<'original' | 'root'>('original')

// ==================== 方法定义 ====================

/**
 * 格式化删除时间（国际化版本）
 */
const formatDeletedTime = (deletedAt: string): string => {
  const date = new Date(deletedAt)
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffMinutes = Math.floor(diffMs / (1000 * 60))
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))

  if (diffMinutes < 1) {
    return t('trash.time.justNow')
  } else if (diffMinutes < 60) {
    return t('trash.time.minutesAgo', { minutes: diffMinutes })
  } else if (diffHours < 24) {
    return t('trash.time.hoursAgo', { hours: diffHours })
  } else {
    return t('trash.time.daysAgo', { days: diffDays })
  }
}

/**
 * 获取文件图标组件
 */
const getFileIcon = (file: FileInfo) => {
  if (file.isDirectory) return Folder
  
  const iconType = getFileTypeIcon(file.originalName, file.isDirectory)
  const iconMap = {
    image: Picture,
    video: VideoPlay,
    audio: Mic,
    folder: Folder,
    file: Document
  }
  
  return iconMap[iconType as keyof typeof iconMap] || Document
}

/**
 * 处理确认
 */
const handleConfirm = () => {
  const restoreToRoot = restoreOption.value === 'root'
  emit('confirm', restoreToRoot)
}

/**
 * 处理关闭
 */
const handleClose = () => {
  if (!props.loading) {
    visible.value = false
    restoreOption.value = 'original'
  }
}
</script>

<style scoped>
.restore-dialog {
  padding: 8px 0;
}

.files-section {
  margin-bottom: 24px;
}

.files-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.files-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--el-border-color-light);
  border-radius: 6px;
  background-color: var(--el-fill-color-lighter);
}

.file-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.file-item:last-child {
  border-bottom: none;
}

.file-icon {
  margin-right: 8px;
  color: var(--el-text-color-regular);
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-meta {
  font-size: 12px;
  color: var(--el-text-color-regular);
  display: flex;
  gap: 8px;
}

.deleted-time {
  color: var(--el-text-color-placeholder);
}

.restore-options {
  margin-bottom: 20px;
}

.restore-options h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.restore-options .el-radio {
  display: block;
  margin-bottom: 12px;
  height: auto;
  line-height: normal;
}

.option-content {
  margin-left: 4px;
}

.option-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 4px;
}

.option-desc {
  font-size: 12px;
  color: var(--el-text-color-regular);
  line-height: 1.4;
}

.conflict-info {
  margin-bottom: 8px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
